<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">
    <title>demo测试0</title>
    <!--{{name}}-->
    <!--<a v-text="name">解决后加载的闪烁</a>-->
    <!--<input type="text" v-model="num1"> <input type="text" v-model="num1"><br>-->
    <!--&lt;!&ndash;触发事件&ndash;&gt;-->
    <!--<button v-on:click="btnstart" v-text="btnName">监听事件</button><br>-->
    <!--&lt;!&ndash; v-bind:value == :value 是单向绑定 只能填充dom&ndash;&gt;-->
    <!--<input type="text" :value="'bind单向绑:'+num1">-->
    <!--&lt;!&ndash;遍历 判断&ndash;&gt;-->
    <!--<ul>-->
        <!--<li v-for="(item,index) in list" :key="index" v-text="index" v-if="index%2!=0"></li>-->
    <!--</ul>-->
    <!--<a v-if="num1 == 0">if判断</a>-->
    <!--<a v-else>else的结果</a>-->
    <!--<button :id="testId" >测试jquery</button>-->

    <!--$.ajax({-->
    <!--type: "get",-->
    <!--url: "http://www.baidu.com",-->
    <!--success: function(msg){-->
    <!--alert( "Data Saved: " + msg );-->
    <!--},-->
    <!--error:function (msg) {-->
    <!--VM.option.title.text = '艹';-->
    <!--VM.render();-->
    <!--alert('失败:'+VM.num1);-->
    <!--},-->

    <!--});-->
</head>
<body>
    <div id="app">
        <div class="container" style="margin-left: 15px;margin-top: 20px">
            <div class="row clearfix">
                <div class="col-md-3 column">
                    <ul class="nav nav-stacked nav-pills">
                        <li class="active">
                            <a href="#">首页</a>
                        </li>
                        <li>
                            <a href="#">简介</a>
                        </li>
                        <li class="disabled">
                            <a href="#">信息</a>
                        </li>
                        <li class="disabled">
                            <a href="#">信息</a>
                        </li>
                        <li class="disabled">
                            <a href="#">信息</a>
                        </li>
                    </ul>
                </div>
                <div class="col-md-9 column">
                    <div id="main" style="height:450px" ></div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="/testjs/jquery-2.1.1.min.js" ></script>
<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
<script src="/testjs/vue.min.js" ></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/js/bootstrap.min.js"></script>
<script>

    VM= new Vue({
        el:'#app',
        data:{
            option :{
                title : {
                    text: '事件分析',
                    subtext: '仅供参考'
                },
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    data:['搜索理财产品','查看产品详情','加入心愿单']
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {show: true, type: ['line', 'bar']},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        boundaryGap : false,
                        data : ['3-11','3-12','3-13','3-14','3-15','3-16','3-17']
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        axisLabel : {
                            formatter: '{value} 人'
                        }
                    }
                ],
                series : [
                    {
                        name:'搜索理财产品',
                        type:'line',
                        data:[710, 730, 650, 780, 620, 590, 770],
                        markPoint : {
                            data : [
                                {type : 'average', name: '平均值'}
                            ]
                        },
                        markLine : {
                            data : [
                                {type : 'average', name: '平均值'}
                            ]
                        }
                    },
                    {
                        name:'查看产品详情',
                        type:'line',
                        data:[655, 611, 701, 699, 597, 688, 601],
                        markPoint : {
                            data : [
                                {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
                            ]
                        },
                        markLine : {
                            data : [
                                {type : 'average', name : '平均值'}
                            ]
                        }
                    },
                    {
                        name:'加入心愿单',
                        type:'line',
                        data:[405, 450, 420, 400, 380, 290, 360],
                        markPoint : {
                            data : [
                                {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
                            ]
                        },
                        markLine : {
                            data : [
                                {type : 'average', name : '平均值'}
                            ]
                        }
                    }
                ]
            }
        },
        methods:{
            render(){
                MYCHART.setOption(this.option);
            },
            btn(){
                this.option.title.text = 'hahhahahahahahahahahahahahahaah';
                this.render();
            }
        },
        mounted:function () {
            MYCHART = echarts.init(document.getElementById('main'));
            //初始请求
            MYCHART.setOption(this.option);
        }
    });
</script>
</html>